<template>
  <view>
    <view class="back" @click="goBack">
      <p>&lt; 返回</p>
    </view>
    <view class="text_div">
      <view
        ><p style="font-size: 36rpx">
          <b>{{ text }}</b>
        </p></view
      >
      <view
        ><p style="font-size: 28rpx; color: #999999">{{ desc }}</p></view
      >
    </view>
    <view class="login-form">
      <view class="login-form-item">
        <p>新密码</p>
        <input type="text" placeholder="请输入新的密码" />
      </view>

      <button
        style="background-color: #0ccb82; color: #fff; margin-top: 80rpx"
        @click="login"
      >
        确认
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: "设置新密码",
      desc: "输入新的密码，点击确定",
    };
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    login() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
  },
};
</script>

<style>
.back {
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  font-size: 28rpx;
  color: #0ccb82;
}
.login-form {
  position: absolute;
  top: 400rpx;
  margin-left: 70rpx;
  width: 610rpx;
}
.login-form-item {
  padding-top: 20rpx;
}
.login-form-item p {
  font-size: 24rpx;
  color: #666666;
  padding: 10rpx;
}


.login-form-item input {
  font-size: 28rpx;
  padding: 10rpx 10rpx;
  color: #666666;
  border-bottom: 2rpx solid #edeef2;
}
.login-form-item input:hover {
  font-size: 28rpx;
  padding: 10rpx 10rpx;
  color: #0CCB82;
  border-bottom: 2rpx solid #0CCB82 ;
}

.text_div {
  position: absolute;
  top: 132rpx;
  margin-left: 70rpx;
}
</style>